<template>
  <el-checkbox-group v-model="modelValue">
    <el-checkbox
      v-for="option in field.options"
      :key="option.value"
      :value="option.value"
      >{{ option.label }}</el-checkbox
    >
  </el-checkbox-group>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { FormField } from "../utils";

interface Props {
  modelValue: string[];
  field: FormField;
}

interface Emits {
  (e: "update:modelValue", value: string[]): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const modelValue = computed({
  get: () => props.modelValue,
  set: value => emit("update:modelValue", value)
});
</script>
